<template>
    <div class="ResultDetails-Panel" v-loading="State.Loading">
        <div class="ResultDetails-Option">
            <div class="ResultDetails-Option-Model" v-for="(item, index) in State.ResultDetailsOption" :key="index"
                @click="SelectOption(index)"
                :class="State.SelectOptionIndex === index ? 'SeleteOptionActive' : 'Noactive'">
                <span>{{ item.OptionName }}</span>
            </div>
        </div>
        <div class="ResultDetails-PersonalInformation">
            <div class="ResultDetails-PersonalInformation-Model" v-for="(item, index) in State.PersonalInformation"
                :key="index">
                <span>{{ item.Name }}</span>
                <span></span>
                <span>{{ item.value }}</span>
            </div>
        </div>
        <!-- 综合结果分析 -->
        <div v-show="State.SelectOptionIndex === 0">
            <!-- 雷达图面板 -->
            <div class="RadarChartPanel">
                <div id="RadarChart">
                </div>
            </div>

            <div class="ComprehensiveResultsPanel">
                <div class="NameText">
                    详细得分点
                </div>
                <div>
                    <div class="t1_r_list" v-for="(item, index) in State.Veidoos" :key="index">
                        <div class="scorePointName">
                            {{ item.Name }}
                        </div>
                        <div class="SPF">
                            {{ item.Result }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="SFI">
                <div class="NameText">
                    提升建议
                </div>
                <div class="t1_b_cont">
                    <div class="t1_b_list" v-for="(item, index) in State.Suggest" :key="index">
                        {{ index + 1 }}.{{ item }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 报告单 -->
        <div v-show="State.SelectOptionIndex === 1">
            <div class="Popup">
                <div class="package_box">
                    <div class="contentBox">
                        <div class="title_box">
                            选手报告单
                            <img src="/img/diagnosticDetails/ic_up_small.png" class="retract_img" @click="retract"
                                v-if="State.retract">
                            <!-- <img src="/images/ic_up_small.png" class="retract_img" @click="retract" v-if="State.retract"> -->
                            <!-- <img src="/images/ic_down_small.png" class="retract_img" @click="retract" v-else> -->
                            <img src="/img/diagnosticDetails/ic_down_small.png" class="retract_img" @click="retract"
                                v-else>
                        </div>
                        <div class="BasicInformation" v-show="State.retract">
                            <div class="Basi_unit BOR BN">
                                <span class="unit_tit">选手参赛号</span>
                                <div class="unit_inp">{{ State.OrderBase.Id || '' }}
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判长审判</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit  BOR BN">
                                <span class="unit_tit">统分裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">监督仲裁签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR BN">
                                <span class="unit_tit">车辆信息登记</span>
                                <a-tooltip>
                                    <template #title>{{ State.OrderBase.CarId }}</template>
                                    <div class="unit_inp">{{ State.OrderBase.CarId || '' }}
                                    </div>
                                </a-tooltip>

                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">比赛时长</span>
                                <div class="unit_inp">
                                    {{ FNumToDate(State.OrderBase.Time) }}
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">实际用时</span>
                                <div class="unit_inp">
                                    {{ FNumToDate(State.OrderBase.UseTime) }}
                                </div>
                            </div>
                        </div>
                        <div class="Form_box">
                            <div class="tit_box">
                                <div class="form_tit BOR rep_T1 BN">项目</div>
                                <div class="form_tit BOR rep_T2">内容</div>
                                <!-- <div class="form_tit BOR rep_T3">配分</div>
                                <div class="form_tit BOR rep_T4">得分</div> -->
                            </div>
                            <div class="form_content">
                                <div class="form_content_unit">
                                    <div class="form_content_unit_tit rep_T1 BOR BN">
                                        <span class="content_unit_tit">
                                            故障现象描述
                                        </span>
                                    </div>
                                    <div class=" unit_list_box rep_T2">
                                        <div class="form_content_unit_list BOR" :key="index"
                                            v-for="(item, index) in report[State.DPN - 1].Appearences.Contents">
                                            <a-tooltip>
                                                <template #title>{{ item.Description }}</template>
                                                <div class="addTxt Existing">{{ item.Description }}</div>
                                            </a-tooltip>
                                        </div>
                                        <div class="form_content_unit_list BOR"
                                            v-if="JSON.stringify(report[State.DPN - 1].Appearences.Contents) === '{}'">
                                        </div>
                                    </div>
                                    <!-- <div class="rep_partition rep_T3 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Appearences.Distribution
                                        }}</span>
                                    </div>
                                    <div class="rep_score rep_T4 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Appearences.Score
                                        }}</span>
                                    </div> -->
                                </div>
                                <div class="form_content_unit">
                                    <div class="form_content_unit_tit rep_T1 BOR BN">
                                        <span class="content_unit_tit">
                                            通过分析得出故障可能原因
                                        </span>
                                    </div>
                                    <div class=" unit_list_box rep_T2">
                                        <div class="form_content_unit_list BOR" :key="index"
                                            v-for="(item, index) in report[State.DPN - 1].Reasons.Contents">
                                            <a-tooltip>
                                                <template #title>{{ item.Description }}</template>
                                                <div class="addTxt Existing">{{ item.Description }}</div>
                                            </a-tooltip>
                                        </div>
                                        <div class="form_content_unit_list BOR"
                                            v-if="JSON.stringify(report[State.DPN - 1].Reasons.Contents) === '{}'">
                                        </div>
                                    </div>
                                    <!-- <div class=" rep_partition rep_T3 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Reasons.Distribution
                                        }}</span>
                                    </div>
                                    <div class="rep_score rep_T4 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN -
                                                1].Reasons.Score
                                        }}</span>
                                    </div> -->
                                </div>
                                <div class="form_content_unit">
                                    <div class="form_content_unit_tit rep_T1 BOR BN">
                                        <span class="content_unit_tit">
                                            故障检修过程
                                        </span>
                                    </div>
                                    <div class=" unit_list_box rep_T2">
                                        <div class="form_content_unit_list BOR" :key="index"
                                            v-for="(item, index) in report[State.DPN - 1].Detectors.Contents">
                                            <a-tooltip>
                                                <template #title>{{ item.Description }}</template>
                                                <div class="addTxt Existing">{{ item.Description }}</div>
                                            </a-tooltip>
                                        </div>
                                        <div class="form_content_unit_list BOR"
                                            v-if="JSON.stringify(report[State.DPN - 1].Detectors.Contents) === '{}'">
                                        </div>
                                    </div>
                                    <!-- <div class="rep_partition rep_T3 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Detectors.Distribution
                                        }}</span>
                                    </div>
                                    <div class="rep_score rep_T4 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN -
                                                1].Detectors.Score
                                        }}</span>
                                    </div> -->
                                </div>
                                <div class="form_content_unit">
                                    <div class="form_content_unit_tit rep_T1 BOR BN">
                                        <span class="content_unit_tit">
                                            故障点和故障类型确认
                                        </span>
                                    </div>
                                    <div class=" unit_list_box rep_T2">
                                        <div class="form_content_unit_list BOR" :key="index"
                                            v-for="(item, index) in report[State.DPN - 1].Faults.Contents">

                                            <a-tooltip>
                                                <template #title>{{ item.Description }}</template>
                                                <div class="addTxt Existing">{{ item.Description }}</div>
                                            </a-tooltip>
                                        </div>
                                        <div class="form_content_unit_list BOR"
                                            v-if="JSON.stringify(report[State.DPN - 1].Faults.Contents) === '{}'">
                                        </div>
                                    </div>
                                    <!-- <div class="rep_partition rep_T3 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Faults.Distribution
                                        }}</span>
                                    </div>
                                    <div class="rep_score rep_T4 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN -
                                                1].Faults.Score
                                        }}</span>
                                    </div> -->
                                </div>
                                <div class="form_content_unit">
                                    <div class="form_content_unit_tit rep_T1 BOR BN">
                                        <span class="content_unit_tit">
                                            故障机理分析
                                        </span>
                                    </div>
                                    <div class=" unit_list_box rep_T2">
                                        <div class="form_content_unit_list BOR" :key="index"
                                            v-for="(item, index) in report[State.DPN - 1].Theorys.Contents">
                                            <a-tooltip>
                                                <template #title>{{ item.Description }}</template>
                                                <div class="addTxt Existing">{{ item.Description }}</div>
                                            </a-tooltip>
                                        </div>
                                        <div class="form_content_unit_list BOR"
                                            v-if="JSON.stringify(report[State.DPN - 1].Theorys.Contents) === '{}'">
                                        </div>
                                    </div>
                                    <!-- <div class="rep_partition rep_T3 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN
                                                - 1].Theorys.Distribution
                                        }}</span>
                                    </div>
                                    <div class="rep_score rep_T4 BOR">
                                        <span class="rep_parameter">{{
                                            report[State.DPN -
                                                1].Theorys.Score
                                        }}</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a-pagination v-model:current="State.DPN" :total="report.length * 10" show-less-items />
            </div>
        </div>
        <!-- 评分表 -->
        <div v-show="State.SelectOptionIndex === 2">
            <div class="Popup">
                <div class="package_box">
                    <div class="contentBox">
                        <div class="title_box">
                            现场评分表
                            <img src="/img/diagnosticDetails/ic_up_small.png" class="retract_img" @click="retract()"
                                v-if="State.retract">
                            <img src="/img/diagnosticDetails/ic_down_small.png" class="retract_img" @click="retract()"
                                v-else>
                        </div>
                        <div class="BasicInformation" v-show="State.retract">
                            <div class="Basi_unit BOR BN">
                                <span class="unit_tit">选手参赛号</span>
                                <div class="unit_inp">{{ State.OrderBase.Id || '' }}
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判长审判</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit  BOR BN">
                                <span class="unit_tit">统分裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">裁判签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">监督仲裁签字</span>
                                <div class="unit_inp">
                                </div>
                            </div>
                            <div class="Basi_unit BOR BN">
                                <span class="unit_tit">车辆信息登记</span>
                                <a-tooltip>
                                    <template #title>{{ State.OrderBase.CarId }}</template>
                                    <div class="unit_inp">{{ State.OrderBase.CarId || '' }}
                                    </div>
                                </a-tooltip>

                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">比赛时长</span>
                                <div class="unit_inp">
                                    {{ FNumToDate(State.OrderBase.Time) }}
                                </div>
                            </div>
                            <div class="Basi_unit BOR">
                                <span class="unit_tit">实际用时</span>
                                <div class="unit_inp">
                                    {{ FNumToDate(State.OrderBase.UseTime) }}
                                </div>
                            </div>
                        </div>
                        <div class="Form_box">
                            <div class="tit_box">
                                <div class="form_tit BOR T1 BN">序号</div>
                                <div class="form_tit BOR T2">项目</div>
                                <div class="form_tit BOR T3">评分点</div>
                                <div class="form_tit BOR T4">说明</div>
                                <div class="form_tit BOR T5">配分</div>
                                <div class="form_tit BOR T6">得分</div>
                            </div>
                            <div class="form_content">
                                <div class="big_box" v-for="(item, index) in State.WorksheetData" :key="index">
                                    <div class="small_box1 BOR BN">
                                        <span class="parameter">
                                            {{ item.Serial }}
                                        </span>
                                    </div>
                                    <div class="small_box1_2 BOR">
                                        <span class="parameter">
                                            {{ item.Project }}
                                        </span>
                                    </div>
                                    <div class="small_box2">
                                        <div class="small_box3" v-for="(items, indexs) in item.Points" :key="indexs">
                                            <div class="RatingPoints BOR">
                                                <span class="parameter">
                                                    {{ items.Name }}
                                                </span>
                                            </div>
                                            <div class="small_box4 BOR">
                                                <div class="small_box5" v-for="(itemes, indexes) in items.Items"
                                                    :key="indexes">
                                                    {{ itemes.Name }}
                                                </div>
                                            </div>
                                            <div class="partition BOR">
                                                <span class="parameter verticalCenter">
                                                    <!-- {{ items.Score }} -->
                                                    {{ items.Share }}
                                                </span>
                                            </div>
                                            <div class="Evascore BOR">
                                                <span class="parameter verticalCenter">
                                                    <!-- {{ items.Share }} -->
                                                    {{ items.Score }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 故障修复记录 -->
        <div v-show="State.SelectOptionIndex === 3">
            <div class="t4_l">
                <div class="moduleName">
                    <div class="MN_I">
                        <!-- <img src="/images/ic_结果分析.png"> -->
                        <img src="/img/diagnosticDetails/ic_结果分析.png">
                    </div>
                    <div class="NameText">
                        故障点统计
                    </div>
                </div>
                <div class="FPSBox">
                    <!-- <div class="circle">
                        {{ State.FaultRepair.Total }}
                    </div> -->
                    <!-- fpsTxt -->
                    <div class="fpsTxtTotal">
                        设置 {{ State.FaultRepair.Total }} 个故障点
                    </div>
                </div>
                <div class="FPSBox">
                    <!-- <div class="circle">
                        {{ State.FaultRepair.Fixed }}
                    </div> -->
                    <!-- <img src="/images/checkbox_answer.png" class="smp" /> -->
                    <img src="/img/diagnosticDetails/checkbox_answer.png" class="smp" />
                    <div class="fpsTxt">
                        修复成功 {{ State.FaultRepair.Fixed }} 个故障点
                    </div>
                </div>
                <div class="FPSBox">
                    <!-- <div class="circle">
                        {{ State.FaultRepair.Wontfix }}
                    </div> -->
                    <!-- <img src="/images/checkbox_incomplete.png" class="smp" /> -->
                    <img src="/img/diagnosticDetails/checkbox_incomplete.png" class="smp" />
                    <div class="fpsTxt">
                        未修复 {{ State.FaultRepair.Wontfix }} 个故障点
                    </div>
                </div>
                <div class="FPSBox">
                    <!-- <div class="circle">
                        {{ State.FaultRepair.Error }}
                    </div> -->
                    <!-- <img src="/images/checkbox_wrong.png" class="smp" /> -->
                    <img src="/img/diagnosticDetails/checkbox_wrong.png" class="smp" />
                    <div class="fpsTxt">
                        修复错误 {{ State.FaultRepair.Error }} 个故障点
                    </div>
                </div>
            </div>
            <div class="t4_r">
                <div class="moduleName">
                    <div class="MN_I">
                        <!-- <img src="/images/ic_故障点记录.png"> -->
                        <img src="/img/diagnosticDetails/ic_故障点记录.png">
                    </div>
                    <div class="NameText">
                        故障记录
                    </div>
                </div>
                <div class="t4_content">
                    <div class="t4_list" :class="item.State == 0 ? 't4_l_1' : item.State == 2 ? 't4_l_2' : ''"
                        v-for="(item, index) in State.FaultRepair.Items" :key="index">
                        <div class="t4_listText" style="width:80%;">
                            {{ item.Name }}
                        </div>
                        <div class="t4_list_ico" v-if="item.State == 0">
                            <img src="/img/diagnosticDetails/checkbox_incomplete.png">
                        </div>
                        <div class="t4_list_type" style="color: #B0B0B0;" v-if="item.State == 0">
                            未修复
                        </div>
                        <div class="t4_list_ico" v-if="item.State == 1">
                            <img src="/img/diagnosticDetails/checkbox_answer.png">
                        </div>
                        <div class="t4_list_type" style="color: #42CB6E;" v-if="item.State == 1">
                            修复正确
                        </div>
                        <div class="t4_list_ico" v-if="item.State == 2">
                            <img src="/img/diagnosticDetails/checkbox_wrong.png">
                        </div>
                        <div class="t4_list_type" style="color: #FB4E4E;" v-if="item.State == 2">
                            修复错误
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let echarts = require("echarts");
import { defineComponent, reactive, ref, onMounted, toRef, toRefs, Ref } from "vue";
import bus from "@/bus.js";
import { ArrowDown } from '@element-plus/icons'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: "ResultDetails",
    components: {
        ArrowDown
    },
    props: {
        ResultDetails: {
            type: Object,
            default: () => { },
        },
        MatchBoolean: {
            type: Number,
            default: 1,
        },
    },
    setup(props, ctx) {
        console.log('props故障诊断传值: ', props.ResultDetails);
        let RadarChart = ref('')
        let report = []
        let State = reactive(
            {
                Loading: true,
                //成绩选项
                ResultDetailsOption: [
                    {
                        OptionName: "综合结果分析"
                    },
                    {
                        OptionName: "报告单"
                    },
                    {
                        OptionName: "评分表"
                    },
                    {
                        OptionName: "故障修复记录"
                    }
                ],
                retract: true,
                //工单所有数据
                orders: '',
                //得分点数据
                Veidoos: [],
                //提示建议
                Suggest: [],
                //故障修复记录数据
                FaultRepair: [],
                //评分表
                WorksheetData: {},
                //报告单
                report: [],
                MathBoolean: false,
                //选项
                SelectOptionIndex: 0,
                //个人信息
                PersonalInformation: [
                    {
                        Name: "任务",
                        // value: props.ResultDetails.trainingTaskName
                        value: sessionStorage.getItem("TaskTitle")
                    },
                    {
                        Name: "姓名",
                        // value: props.ResultDetails.userName
                        value: sessionStorage.getItem("StudentName")
                    },
                    {
                        Name: "总用时",
                        value: FNumToDate(props.ResultDetails.time)
                    },
                    // {
                    //     Name: "正确项",
                    //     value: JSON.parse(props.ResultDetails.orders).CorrectOperationInfosCount + '/' + JSON.parse(props.ResultDetails.orders).TotalOperationInfosCount
                    // },
                    {
                        Name: "总得分",
                        value: props.ResultDetails.score
                    }
                ],
                //综合信息
                ResultAnalysisArr: [],
                Record: [],
                OperatingSteps: [],
                DPN: 1,
                //工单基础数据
                OrderBase: {},
                RadarChartOption: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    radar: [
                        {
                            indicator: [
                                { text: '工艺流程', max: 100 },
                                { text: '操作规范', max: 100 },
                                { text: '工具使用', max: 100 },
                                { text: '安全意识', max: 100 },
                                { text: '技能熟练', max: 100 }
                            ],
                            center: ['47.5%', '53%'],
                            radius: 160,
                            //改变成圆形
                            shape: 'circle',
                        },
                    ],
                    series: [
                        {
                            type: 'radar',
                            tooltip: {
                                trigger: 'item'
                            },
                            areaStyle: {},
                            data: [
                                {
                                    value: [20, 35, 55, 10, 21],
                                    name: '成绩',
                                }
                            ],
                            itemStyle: {     //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
                                color: '#196FF7',
                                borderColor: '#196FF7',
                            },
                        },
                    ]
                },
            }
        )
        //处理时间函数
        function FNumToDate(seconds) {
            let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
            seconds -= 3600 * hour;
            let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
            seconds -= 60 * min;
            let sec = seconds >= 10 ? seconds : '0' + seconds;
            return hour + ':' + min + ':' + sec;
        }
        //收起
        function retract() {
            State.retract = !State.retract
        }

        //选择哪个模块
        function SelectOption(index) {
            State.SelectOptionIndex = index
        }
        let Result = props.ResultDetails
        console.log('Result', Result);

        if (Result.orders == '') {
            Result.orders = null
        }
        let orders = JSON.parse(Result.orders)
        console.log('工单orders', orders);

        let record = JSON.parse(Result.record)
        console.log('--------------', record);

        State.Veidoos = record.Synthetical.Veidoos
        State.Suggest = record.Synthetical.Suggest
        State.FaultRepair = record.FaultRepair
        State.WorksheetData = record.RatingForm.RatingForm.RatingFormGroupModels
        State.Record = record
        State.orders = orders
        State.OrderBase = orders.OrderBase
        console.log(State.orders);
        console.log(record);
        report = JSON.parse(JSON.stringify(orders.Orders))


        //处理传过来的数值
        function HandleResult(WorkorderIndex) {
            let Result = props.ResultDetails
            let record = JSON.parse(Result.record)

            //雷达图数据
            RadarChart.value.setOption({
                radar: [
                    {
                        indicator: [
                            { text: record.Synthetical.Veidoos[0].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[1].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[2].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[3].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[4].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[5].Name, max: 100 },
                            { text: record.Synthetical.Veidoos[6].Name, max: 100 },
                        ]
                    },
                ],
                series: [
                    {
                        data: [
                            {
                                value: [record.Synthetical.Veidoos[0].Result,
                                record.Synthetical.Veidoos[1].Result,
                                record.Synthetical.Veidoos[2].Result,
                                record.Synthetical.Veidoos[3].Result,
                                record.Synthetical.Veidoos[4].Result,
                                record.Synthetical.Veidoos[5].Result,
                                record.Synthetical.Veidoos[6].Result],
                                name: '结果分析',
                            }
                        ]
                    }
                ]
            })
        }


        onMounted(() => {
            console.log('42=====', props.ResultDetails);
            //获取雷达图的Demo
            RadarChart.value = echarts.init(document.getElementById("RadarChart"));
            RadarChart.value.setOption(State.RadarChartOption);
            HandleResult()
            State.Loading = false
            // console.log('信息~~~~~: ',State.PersonalInformation);
        });
        return {
            State,
            RadarChart,
            SelectOption,
            retract,
            FNumToDate,
            report,
        };
    },
});
</script>
<style scoped lang="less">
.ResultDetails-Panel {
    margin-left: 15px;
    width: 98%;
    height: 90%;
    // background:blue;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

.ResultDetails-Option {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ResultDetails-Option-Model {
    width: 160px;
    height: 40px;
    background: rgba(129, 133, 156, 0.2);
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ResultDetails-Option>div:nth-child(1) {
    border-radius: 20px 0px 0px 20px;
}

.ResultDetails-Option>div:nth-last-child(1) {
    border-radius: 0px 20px 20px 0px;
}

.SeleteOptionActive {
    background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
    color: #FFFFFF;
}

.Noactive {
    background: rgba(129, 133, 156, 0.1);
}

.ResultDetails-PersonalInformation {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px 1px 0px 0px rgba(129, 133, 156, 0.2);
}

.ResultDetails-PersonalInformation-Model {
    width: 33%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

//   .ResultDetails-PersonalInformation>div:nth-child(1){
//     width: 600px;
//   }
.ResultDetails-PersonalInformation-Model>span:nth-child(1) {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(2) {
    width: 2px;
    height: 16px;
    margin-left: 20px;
    background: #218CDE;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(3) {
    margin-left: 20px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.RadarChartPanel {
    position: absolute;
    margin-left: 100px;
    margin-top: 10px;
    width: 35%;
    height: 55%;
}

#RadarChart {
    width: 100%;
    height: 100%;
}

.ComprehensiveResultsPanel {
    position: absolute;
    right: 150px;
    margin-top: 10px;
    width: 35%;
    height: 55%;
}

.t1_r_list {
    overflow: hidden;
    margin-top: 20px;
    float: left;
    width: 100%;
}

.scorePointName {
    font-size: 16px;
    font-weight: 400;
    color: #5E5E5E;
    float: left;
    margin-left: 40px;
}

.SPF {
    font-size: 16px;
    font-weight: 600;
    color: #202020;
    float: right;
    margin-right: 126px;
}

.Resultl-list-item {
    width: 600px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    box-shadow: 0px -1px 0px 0px rgba(54, 56, 75, 0.2);
}

.Resultl-list-classification {
    position: absolute;
    width: 80px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    color: #81859C;
}

.Resultl-list-number {
    position: absolute;
    width: 98%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    color: #1B1B1D;
}

.ResultAnalysisPanel>div:nth-last-child(1) {
    border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

//操作步骤
.OperationRecord {
    position: absolute;
    width: 98%;
    height: 70%;
}

.OperationRecord .elscrollbar {
    position: absolute;
    height: 100%;
    width: 100%;
}

.OperationRecord-model {
    margin-left: 20px;
    width: 98%;
    padding-top: 40px;
    overflow: hidden;
}

.OperationRecord .el-scrollbar__view>div:nth-child(1) {
    margin-top: 0px;
}

.OperationRecord-model>div:nth-child(1) {
    width: 5%;
    height: 30px;
    line-height: 30px;
    background: rgba(73, 141, 64, 0);
    border: 1px solid #498D40;
    border-radius: 15px;
    float: left;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.OperationRecord-false {
    border: 1px solid #BF3434 !important;
}

.OperationRecord-model>div:nth-child(2) {
    float: left;
    margin-left: 30px;
    margin-bottom: 14px;
    font-size: 22px;
}

.stepBox {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(54, 56, 75, 0.2);
    text-align: left;
    padding-top: 14px;
}

.stepText {
    padding-left: 200px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
    line-height: 38px;
}

.stepimg {
    width: 22px;
    height: 22px;
    margin-bottom: -4px;
}

//详细操作记录
.FaultRecordPanel {
    position: absolute;
    width: 98%;
    height: 70%;
}

.FaultRecordPanel .elscrollbar {
    position: absolute;
    height: 100%;
    width: 100%;
}

.FaultRecordPanel-model {
    margin-left: 20px;
    width: 98%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

.FaultRecordPanel-model>div:nth-child(1) {
    width: 7%;
    height: 30px;
    background: rgba(73, 141, 64, 0);
    border: 1px solid #498D40;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.FaultRecordPanel-false {
    border: 1px solid #BF3434 !important;
}

.FaultRecordPanel-model>div:nth-child(2) {
    margin-left: 10px;
    font-size: 22px;
}

.SFI {
    position: absolute;
    bottom: 0;
    width: 96%;
    height: 20%;
    margin-left: 1%;
    padding-left: 1%;
    background: linear-gradient(180deg, #F0F1FE 0%, rgba(240, 241, 254, 0) 100%);
    border-radius: 40px 40px 40px 40px;
}

.t1_b_cont {
    margin: 0 auto;
    width: 96%;
    height: 120px;
    overflow-y: auto;
    text-align: left;
}

.t1_b_list {
    font-size: 16px;
    font-weight: 400;
    color: #202020;
    margin: 10px;
}

.NameText {
    float: left;
    font-size: 20px;
    font-weight: 500;
    color: #202020;
    margin-top: 37px;
    margin-left: 10px;
    width: 80%;
    text-align: left;
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #DFE1E8;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #F8F8F8;
}


.t4_l {
    width: 600px;
    height: 700px;
    background: linear-gradient(180deg, #F0F1FE 0%, rgba(240, 241, 254, 0) 100%);
    border-radius: 40px 40px 40px 40px;
    margin-top: 30px;
    margin-left: 40px;
    float: left;
}

.addTxt {
    float: left;
    font-size: 16px;
    font-weight: 400;
    color: #B0B0B0;
    padding-left: 20px;
}

.t4_r {
    width: 980px;
    height: 700px;
    background: linear-gradient(180deg, #F0F1FE 0%, rgba(240, 241, 254, 0) 100%);
    border-radius: 40px 40px 40px 40px;
    margin-top: 30px;
    margin-left: 40px;
    float: left;
}

.FPSBox {
    overflow: hidden;
    margin: 24px 0 48px 0;
}

.circle {
    float: left;
    width: 72px;
    height: 72px;
    background: #000000;
    border-radius: 40px 40px 40px 40px;
    font-size: 24px;
    font-weight: bold;
    line-height: 72px;
    color: #9BFB4E;
    text-align: center;
    margin-left: 72px;
}

.fpsTxt {
    float: left;
    height: 72px;
    line-height: 72px;
    font-size: 16px;
    font-weight: 400;
    color: #202020;
    margin-left: 16px;
}

.fpsTxtTotal {
    width: 420px;
    height: 42px;
    background: linear-gradient(90deg,
            rgba(155, 251, 78, 0.1) 0%,
            rgba(155, 251, 78, 0.07) 58%,
            rgba(155, 251, 78, 0) 100%);
    border-radius: 8px 0px 0px 8px;
    font-size: 16px;
    font-weight: 600;
    margin-left: -100px;
    line-height: 42px;
    padding-left: 20px;
    margin-top: 20px;
}

.smp {
    width: 24px;
    height: 24px;
    float: left;
    margin-left: 60px;
    margin-top: 24px;
}

.t4_content {
    width: 920px;
    height: 636px;
    margin: 0 auto;
    margin-top: 20px;
    overflow-y: auto;
    text-align: left;
}

.Existing {
    color: rgba(26, 26, 26, 1);
    width: 800px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t4_list {
    width: 820px;
    height: 72px;
    // background: linear-gradient(90deg, rgba(155, 251, 78, 0.1) 0%, rgba(155, 251, 78, 0.07) 58%, rgba(155, 251, 78, 0) 100%);
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 16px;

    /*弹性盒模型*/
    display: flex;
    /*主轴居中对齐*/
    /* justify-content: center; */
    /*侧轴居中对齐*/
    align-items: center;
}

.t4_listText {
    font-size: 16px;
    font-weight: 400;
    color: #202020;
    margin-left: 16px;
    margin-right: 16px;
}

.t4_list_ico {
    width: 24px;
    margin-right: 6px;
}

.t4_list_ico>img {
    width: 100%;
}

.moduleName {
    overflow: hidden;
}

.MN_I {
    float: left;
    width: 24px;
    margin-top: 40px;
    margin-left: 40px;
}

.MN_I>img {
    width: 100%;
}


.Popup {
    width: 100%;
    height: 700px;
    border-radius: 16px 16px 16px 16px;
}

.titBox {
    height: 54px;
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    line-height: 42px;
    margin-top: 30px;
    margin-left: 40px;
}

.cancel {
    font-size: 28px;
    font-weight: 600;
    float: right;
    margin-top: 4px;
    margin-right: 30px;
}

.contentBox {
    border: 1px solid #E8ECF4;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.form_content_unit {
    width: 100%;
    min-height: 64px;
    position: relative;
    overflow: hidden;
}

.form_content_unit_tit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.form_content_unit_list {
    // width: 100%;
    width: 137%;
    float: left;
    height: 64px;
    line-height: 64px;
}

.rep_T1 {
    width: 26%;
}

.rep_T2 {
    // width: 54%;
    width: 74%;
}

.rep_T3 {
    width: 10%;
}

.rep_T4 {
    width: 10%;
}

.rep_partition {
    position: absolute;
    top: 0;
    right: 10%;
    bottom: 0;
}

.rep_parameter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rep_score {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.content_unit_tit {
    font-size: 16px;
    font-weight: 400;
    color: #202020;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate(0, -50%);
}

.title_box {
    height: 62px;
    line-height: 62px;
    font-size: 20px;
    font-weight: 600;
    padding-left: 10px;
    color: #000;
}

.BasicInformation {
    width: 100%;
    height: 168px;
}

.Basi_unit {
    float: left;
    width: 33.333%;
    height: 56px;

}

.BOR {
    border-top: 1px solid #E8ECF4;
    border-left: 1px solid #E8ECF4;
}

.BOL {
    border-left: 1px solid #E8ECF4;
}

.BOB {
    border-bottom: 1px solid #E8ECF4;
}

.BN {
    border-left: none;
}

.unit_tit {
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 56px;
    padding-left: 16px;
    font-weight: 600;
}

.unit_inp {
    width: 300px;
    height: 56px;
    outline: none;
    font-size: 16px;
    border: none;
    float: right;
    margin-right: 16px;
    line-height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package_box {
    overflow-y: auto;
    height: 667px;
    padding-right: 20px;
    margin: 0 40px;
    margin-top: 10px;
    color: #000;
}

.package_box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.package_box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    background: #DFE1E8;
}

.package_box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    border-radius: 10px;
    background: #F8F8F8;
}

.Form_box {
    width: 100%;
}

.tit_box {
    width: 100%;
    height: 42px;
    background-color: #F7F8FB;
}

.form_tit {
    float: left;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.form_content {
    font-size: 16px;
}

.T1 {
    width: 6%;
}

.T2 {
    width: 20%;
}

.T3 {
    width: 18%;
}

.T3s {
    width: 71%;
}

.T3ss {
    width: 10%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.T4 {
    width: 40%;
}

.T5 {
    width: 8%;
}

.T6 {
    width: 8%;
}

.partition {
    width: 10.6%;
    position: absolute;
    top: 0;
    right: 11%;
    bottom: 0;
}

.RatingPoints {
    width: 24.4%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}


.parameter {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(0%, -50%);
}

.unit_list_box {
    float: left;
    margin-left: 26%;
}

.fcut1 {
    height: 1464px;
}

.fcut2 {
    height: 400px;
}

.verticalCenter {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.big_box {
    width: 100%;
    min-height: 64px;
    position: relative;
    overflow: hidden;
}

.small_box1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 6%;
}

.small_box1_2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    margin-left: 6%;
}

.small_box2 {
    float: left;
    margin-left: 26%;
    width: 74%;
}

.small_box3 {
    position: relative;
    width: 100%;
    float: left;
    line-height: 24px;
}

.small_box4 {
    width: 54.2%;
    float: left;
    margin-left: 24.3%;
}

.small_box5 {
    width: 100%;
    float: left;
    line-height: 24px;
    padding: 12px;
}

.Evascore {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10.9%;
}

/deep/.ant-pagination {
    margin-top: 10px !important;
}

.retract_img {
    float: right;
    width: 24px;
    margin-top: 16px;
    margin-right: 16px;
}
</style>